

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-container :style="{'min-height': containerHeight + 'px'}">
            <el-header style="text-align: left; font-size: 12px">
                <el-button type="primary" icon="el-icon-folder-add" @click="goAdd">新增</el-button>
                <el-button type="warning" icon="el-icon-edit" @click="submitForm('ruleForm')">保存</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="delAllSelection">删除</el-button>
            </el-header>

            <el-container style="border-top: 1px solid rgb(88, 149, 194)">
                <transition name="el-zoom-in-top">
                    <el-aside
                        :width="asideWidth"
                        style="background-color: rgb(238, 241, 246)"
                        v-show="condition"
                    >
                        <el-tree
                            :data="treeData"
                            :props="defaultProps"
                            @node-click="handleNodeClick"
                            @current-change="currentChange"
                            default-expand-all
                            :expand-on-click-node="false"
                            :highlight-current="true"
                        ></el-tree>
                    </el-aside>
                </transition>
                <!-- 收起栏 -->
                <div class="tree_show">
                    <div @click="treeShow" class="icon_click">
                        <i :class="icon_direction"></i>
                    </div>
                </div>
                <el-main style="background-color: rgb(238, 241, 246)">
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="上级部门" prop="parentId">
                            <tree-Select
                                ref="treeSelect"
                                :props="defaultProps1"
                                :options="treeData"
                                :value="parentId"
                                :departName="departName"
                                @handleTreeClick="handleTreeClick"
                                :accordion="true"
                            ></tree-Select>
                        </el-form-item>
                        <el-form-item label="部门名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>

                        <el-form-item label="是否分公司" prop="isCompany">
                            <el-radio-group v-model="ruleForm.isCompany">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import appMain from '../../../utils/app_main';
export default {
    data() {
        return {
            containerHeight: '',
            pageTitle: '',
            icon_direction: 'el-icon-arrow-left',
            condition: true,
            asideWidth: '300px',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id'
            },
            defaultProps1: {
                children: 'children',
                label: 'name',
                value: 'id'
            },
            ruleForm: {
                name: '', //组织机构名称或部门名称或分公司名称
                parentId: '', //组织机构父节点ID
                isCompany: 0 //是否是分公司，0不是，1是
            },
            parentId: '',
            //默认回显的数据
            departName: '',
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'change' },
                    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'change' }
                ],
                parentId: [{ required: true, message: '请选择', trigger: 'blur' }]
            }
        };
    },
    created() {
        this.getTree();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    methods: {
        treeShow() {
            this.condition = !this.condition;
            if (this.condition) {
                this.asideWidth = '300px';
                this.icon_direction = 'el-icon-arrow-left';
            } else {
                this.asideWidth = '0px';
                this.icon_direction = 'el-icon-arrow-right';
            }
        },
        // 获取树的数据
        getTree() {
            appMain
                .organizationList()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.treeData = res.data.data;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 树元素点击事件
        handleNodeClick(e) {
            console.log(e, 'treeItem');
            this.ruleForm = _.cloneDeep(e);
            this.parentId = this.ruleForm.parentId;
            console.log('handleNodeClick', this.ruleForm);
        },
        currentChange(node, obj) {
            //如果parentid为 0 无上级部门
            if (node.parentId === '0') {
                this.departName = '无上级部门';
                this.ruleForm.parentId = '0';
            } else {
                this.departName = obj.parent.data.name;
            }
        },
        handleTreeClick(data) {
            console.log(data, 'handleTreeClick');

            if (data === '') {
                this.ruleForm = {
                    name: '', //组织机构名称或部门名称或分公司名称
                    parentId: '', //组织机构父节点ID
                    isCompany: 0 //是否是分公司，0不是，1是
                };
                this.departName = '';
            } else {
                // this.ruleForm = {
                //     name: '', //组织机构名称或部门名称或分公司名称
                //     parentId: data.id, //组织机构父节点ID
                //     isCompany: 0 //是否是分公司，0不是，1是
                // };
                this.ruleForm.parentId = data.id;
                //this.departName = '';
            }

            console.log(this.ruleForm, 'handleTreeClick ruleForm');
        },
        goAdd() {
            let parentId = this.ruleForm.parentId;
            //清空
            this.ruleForm = {
                name: '', //组织机构名称或部门名称或分公司名称
                parentId: parentId, //组织机构父节点ID
                isCompany: 0 //是否是分公司，0不是，1是
            };
        },
        organizationInsert() {
            appMain
                .organizationInsert(this.ruleForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        //this.$message.error('服务器繁忙，请稍后再试');
                        this.resetForm('ruleForm');
                        this.$message.success(res.data.message);
                        this.getTree();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        organizationUpdateById(ruleForm) {
            appMain
                .organizationUpdateById(ruleForm)
                .then(res => {
                    if (res.data.code === 20000) {
                        //this.$message.error('服务器繁忙，请稍后再试');
                        this.resetForm('ruleForm');
                        this.$message.success(res.data.message);
                        this.getTree();
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        delAllSelection() {
            if (!this.ruleForm.id) {
                this.$message('请选择一条记录');
                return;
            }

            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    //请求接口删除数据
                    this.deleteById(this.ruleForm.id);
                })
                .catch(() => {});
        },
        deleteById(id) {
            appMain
                .organizationDelById({}, id)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.getTree();
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    //alert('submit!');

                    if (this.ruleForm.id) {
                        const ruleForm = {
                            id: this.ruleForm.id,
                            name: this.ruleForm.name, //组织机构名称或部门名称或分公司名称
                            parentId: this.ruleForm.parentId, //组织机构父节点ID
                            isCompany: this.ruleForm.isCompany //是否是分公司，0不是，1是
                        };
                        this.organizationUpdateById(ruleForm);
                    } else {
                        this.organizationInsert();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            //清空
            this.parentId = '';
            this.departName = '';
            this.ruleForm = {
                name: '', //组织机构名称或部门名称或分公司名称
                parentId: '', //组织机构父节点ID
                isCompany: 0 //是否是分公司，0不是，1是
            };
            this.$refs.treeSelect.clearHandle();

            this.$refs[formName].resetFields();
        }
    }
};
</script>



<style lang="css" scoped>
.el-header {
    line-height: 60px;
}
.icon_click {
    padding-top: 23px;
    height: 50px;
    width: 100%;
    background-color: rgb(169, 203, 229);
    text-align: center;
}

.tree_show {
    width: 16px;
    background-color: rgb(88, 149, 194);
    padding-top: 20rem;
}
.el-aside {
    color: #333;
}

.el-select,
.el-input,
el-radio-group {
    width: 360px !important;
}
</style>
